{# 模态框 - 作品详细信息显示和作品编辑容器 #}
<div id="modal" class="modal">
    <div id="modal_content" class="modal_content">
        <div class="modal_header"> </div>
        <div class="modal_body"> </div>
        <div class="modal_footer"> </div>
    </div>
</div>

<script>
function hide_modal() {
  $('#modal').css('display', 'none');
}
function show_modal() {
  $('#modal').css('display', 'block');
}

$(document).ready(function() {
    $('#modal').on('md_show', function() {
      $('#modal_content').animate({opacity:1}, 100, show_modal);
      //this.style.display = "block";
    });
    $('#modal').on('md_close', function() {
      $('#modal_content').animate({opacity:0}, 300, hide_modal);
      //this.style.display = "none";
    });
});
</script>

<style>
.modal{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;
}
.modal_content{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    max-width: 80%;
    max-height: 90%;
    margin: 50px auto;
    border-radius:5px;
    -webkit-animation: zoom 0.6s;
    animation: zoomin 0.6s;
}
@-webkit-keyframes zoomin{
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
@keyframes zoomin{
    from {transform: scale(0)}
    to {transform: scale(1)}
}
@-webkit-keyframes zoomout{
    from {transform: scale(1)}
    to {transform: scale(0)}
}
@keyframes zoomout{
    from {transform: scale(1)}
    to {transform: scale(0)}
}
.modal_header{
    width: 100%;
    padding: 10px;
}
.modal_close{
    color: LightGrey;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
}
.modal_close:hover, .modal_close:focus{
    font-weight: bold;
    color: black;
}
.modal_body{
    width: 100%;
    font-size: 18px;
}
.modal_footer{
    width: 100%;
    padding: 10px;
}
</style>
